Leave a star to support if this helped! ⭐
The Roadmap: Module 04

React Router: The
Application Map.

Stop refreshing the whole page. Learn how to switch between views instantly and build multi-page feelings inside a single-page app.

0% Refresh

No more white flashes between pages.

FAST Swap

Switch views in milliseconds.

01

Package Installation

Get the Tools

Run this command in your terminal to add the router to your project:

npm install react-router-dom
02

Single Page Applications (SPA)

The Mental Model

In a traditional site, clicking a link fetches a new HTML file. In an SPA, the page never reloads. React simply swaps components in and out.

The Process
1
Catch the Click
2
Swap Component
3
Update the Link

Result: It feels like a new page, but you never actually left the first one.

User Experience

Zero Waiting

Navigation happens instantly. No white flashes or waiting for the browser to reload.

Memory retention

Items in a shopping cart or text in a search bar stay exactly where they are as you switch pages.

03

Routes & BrowserRouter

Visual Component Hierarchy

BrowserRouter →
Routes
→
Route path="/..."

BrowserRouter

The parent that enables navigation history.

Routes

The container that picks the best matching URL.

How it works

To start routing, you wrap your entire app in the BrowserRouter. This monitors the URL and tells React which component to show based on the path.

Basic Setup
App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
05

Dynamic Routes & useNavigate

Reading URL Variables

useParams Hook

Access dynamic segments of the URL, like IDs or usernames, to show specific data.

const { id } = useParams();
Moving via Logic

useNavigate Hook

Redirect users after an action (like a form submission or a button click).

navigate('/dashboard');
Implementation
import { useParams, useNavigate } from 'react-router-dom';
function UserDetail() {
  const { userId } = useParams();
  const navigate = useNavigate();

  // Redirect home after clicking
  const goHome = () => navigate('/');

  return (
    <div>
      <h1>User ID: {userId}</h1>
      <button onClick={goHome}>Back</button>
    </div>
  );
}
myapp.com/user/99

User ID: 99

Content loaded for dynamic param userId

06

Nested Routes & <Outlet />

How it works

An <Outlet /> is a placeholder. It tells a parent route exactly where to "inject" its child components so they appear inside a shared layout.

<Outlet /> Child route content swaps here
Dashboard Layout (Parent with Sidebar)
Layout.jsx
import { Outlet } from 'react-router-dom';
import Sidebar from './Sidebar';

export default function DashboardLayout() {
  return (
    <div className="flex">
      <Sidebar />
      <main className="p-8">
        <Outlet /> // Content
      </main>
    </div>
  );
}
App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './Layout';
import Home from './Home';
import Profile from './Profile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DashboardLayout />}>
          <Route index element={<Home />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
07

Protected Routes & Auth

Gatekeeping Content

Create a wrapper component that checks if a user is logged in. If not, use the <Navigate /> component to send them to the login page automatically.

Logic

if (!user) return <Navigate to="/login" />

Success

return <Outlet />

const ProtectedRoute = ({ user }) => {
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
};